<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="java.util.List"%>
<%@page import="com.yaodian100.ec.member.entity.ViewWishList"%>
<%@page import="java.text.DateFormat"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c-rt"%>
<%@page import="com.yaodian100.core.common.utils.ServerValue"%>
<c-rt:set var="frontContextPath" value='<%=ServerValue.getFrontContextPath()%>'/>
<html>
<head>
<style>
.tablesorter{table-layout:fixed}
</style>
<link rel="stylesheet" href="/css/table_sorter.css" type="text/css" id="" media="print, projection, screen" />
<script type="text/javascript" charset="UTF-8" src="/js/jquery.tablesorter.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.metadata.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.tablesorter.pager.js"></script>
<script language="javascript">
$().ready(function(){
	
	var deleteId;
	$("#current_location").html('&nbsp;&gt;&nbsp;收藏盒&nbsp;-&nbsp;收藏分类');
	$("#m_mycategorie").css("font-weight","bold");
	$(":textarea[id*=ta_]").hide();
	$(":a[id*=cats_]").hide();
	$(":a[id*=c_]").hide();
	
	$("#dialog").dialog({
		bgiframe: true,
		autoOpen: false,
		height: 150,
		width:250,
		modal: true
	});
	
	$("#mdialog").dialog({
		bgiframe: true,
		autoOpen: false,
		height: 150,
		width: 250,
		modal: true
	});
	
	$(":a[id*=e_]").click(function(){
		var text = $(this).attr("id").split("_")[1];
		$("#ta_"+text).val($("#memo_"+text).text());
		$("#e_"+text).hide();
		$("#d_"+text).hide();
		$("#memo_"+text).hide();
		$("#cats_"+text).show();
		$("#c_"+text).show();
		$("#ta_"+text).show();
	});

	$(":a[id*=cats_]").click(function(){
		var text = $(this).attr("id").split("_")[1];
		$.post("${frontContextPath}/member/myCollection/saveWishList.do",{wishListId:text, categoryMemo:$("#ta_"+text).val()},callback,"json");
		function callback(result){
			if(result=='success'){
				$("#memo_"+text).text($("#ta_"+text).val());
				$("#e_"+text).show();
				$("#d_"+text).show();
				$("#memo_"+text).show();
				$("#cats_"+text).hide();
				$("#c_"+text).hide();
				$("#ta_"+text).hide();
			}else{
				$("#dialog_msg").text('储存失败！');
				$("#mdialog").dialog('open');
			}
		}
	});

	$(":a[id*=c_]").click(function(){
		var text = $(this).attr("id").split("_")[1];
		$("#e_"+text).show();
		$("#d_"+text).show();
		$("#memo_"+text).show();
		$("#cats_"+text).hide();
		$("#c_"+text).hide();
		$("#ta_"+text).hide();
	});

	$(":a[id*=d_]").click(function(){
		deleteId = $(this).attr("id").split("_")[1];
		$("#dialog").dialog('open');
	});

	$("#delete_commit").click(function(){
		$("#dialog").dialog('close');
		$.post("${frontContextPath}/member/myCollection/deleteWishList.do",{delIdList:deleteId},delcallback,"json");
		function delcallback(result){
			if(result=='success'){
				//var delIdList = deleteId.split(',');
				//jQuery.each(delIdList, function(index, item) {
				//	alert(item);
				//	$("#vw_"+item).remove();
				//});
				//$("#dialog_msg").text('资料已删除！');
				//$("#totalSize").text($(":tr[id*=vw_]").length);
				//$(":p[id=showCounter]").text($("#totalSize").text());
				//if($("#totalSize").text()==0){
				//	$("#cTable_body").html('<tr><td height="30" colspan="6"><p>目前没有收藏任何商品，快把喜欢的商品加入收藏盒吧！</p></td></tr>');
				//}
				//$("#cTable").trigger("update");
				//$("#cbAll").removeAttr('checked');
				location.reload();
			}else{
				$("#dialog_msg").text('删除失败！');
				$("#mdialog").dialog('open');
			}
		}
	});

	$("#delete_cancel").click(function(){
		$("#dialog").dialog('close');
	});
	
	$("#msg_ok").click(function(){
		$("#mdialog").dialog('close');
	});

	$(":input[id=del_button]").click(function(){
		var isFirst = true;
		deleteId = "";
		$(":input[id*=cb_]").each(function(){
			var text = $(this).attr('id').split('_')[1];
			if($("#cb_"+text).attr('checked')==true){
				if(isFirst){
					deleteId = text;
					isFirst = false;
				}else{
					deleteId+= ","+text;
				}
			}
		});
		if(deleteId.length!=0){$("#dialog").dialog('open');}
	});

	$("#cbAll").click(function(){
		$(":input[id*=cb_]").attr('checked',$("#cbAll").attr('checked'));
	});

	$(":a[id*=nextP]").click(function(){
		$("#pager_next").click();
		refreshPage();
	});
	
	$(":a[id*=preP]").click(function(){
		$("#pager_pre").click();
		refreshPage();
	});
	
	function refreshPage(){
		if($("#pagenum").attr('value')!=""){
			var splitT = $("#pagenum").attr('value').split('/');
			$(":span[id*=pNum]").text($("#pagenum").attr('value'));
			$("#curPage").text(splitT[0]);
			$("#totalPage").text(splitT[1]);
			$(":a[id*=directP_]").css({"font-weight":"normal",'color' : '#369'});
			$("#directP_"+splitT[0]).css({"font-weight":"bold",'color' : '#000'});
		}
	}

	$(":a[id*=directP_]").click(function(){
		var text = $(this).attr('id').split('_')[1];
		var curP = $("#pagenum").attr('value').split('/')[0];
		if(text>curP){
			for(var i=0; i<text-curP; i++){
				$("#pager_next").click();
			}
			refreshPage();
		}else if(text<curP){
			for(var i=0; i<curP-text; i++){
				$("#pager_pre").click();
			}
			refreshPage();
		}
	});

	if(${categoryListSize}==0){
		$("#cTable").attr('class','tb-2');
		$("#cTable_body").html('<tr><td height="30" colspan="6">目前没有收藏任何类别，快把关注的类别加入收藏盒吧！</td></tr>');
	}else if(${categoryListSize}>1){
		$("#cTable").tablesorter().tablesorterPager({container: $("#pager")});
		refreshPage();
	}
	
	$(":textarea[id*=ta_]").keyup(function(){
		var text = $(this).attr('id').split('_')[1];
        checklength("ta_"+text,50);
    });
});
function checklength(ctlid,maxlength)
{              
   if ($("#"+ctlid).val().length > maxlength) {
          $("#"+ctlid).val($("#"+ctlid).val().substring(0, maxlength));
          return false;
   }
}
</script>
</head>
<body>
<%
@SuppressWarnings("unchecked")
List<ViewWishList> cList = (List)request.getAttribute("viewWishList");
ViewWishList vwList;
DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
%>
  <div class="content mb-od">
    <h2>收藏盒</h2>
    <div class="mb-show">
      <ul class="mb-tab">
        <li><a href="${frontContextPath}/member/myCollection/toproductc.do">收藏商品(<b>${productListSize}</b>)</a></li>
        <li class="mb-tab-f"><a href="${frontContextPath}/member/myCollection/tocategoriesc.do" >收藏分类(<b>${categoryListSize}</b>)</a></li>
      </ul>
       <div class="a-function"><a href="${frontContextPath}/shopping/cart.do" class="icon-car">查看购物车</a></div>
      <p class="icon-collection"><strong>关于收藏分类</strong>：遇到感兴趣的分类时，您可以把把分类路径加入收藏分类列表中，方便下次快速造访这些分类。</p>
      <div class="f-lt" style="margin-bottom:-2em;"><input type="submit" id="del_button" value="删除所选" /> </div>
      <p class="bg-gy" align="right" >共<span id="showCounter">${categoryListSize}</span>笔： <span id="pNum"></span> 
      	<c-rt:choose><c-rt:when test="${categoryListSize<=20}">
			<span class="a-no">&lt; 上一页</span> |  <span class="a-no">下一页 &gt;</span>
		</c-rt:when><c-rt:otherwise>
			<a href="javascript:;" class="a-togo" id="preP">上一页</a> | <a href="javascript:;" class="a-togo" id="nextP">下一页</a>
		</c-rt:otherwise></c-rt:choose>
      </p>
      <table id="cTable" class="tablesorter {sortlist: [[3,1]]} tb-2">
      	<thead>
          <tr>
            <th width="13" class="{sorter: false}"><input type="checkbox" id="cbAll" /></th>
            <th width="284" class="{sorter: false}">分类名称</th>
            <th class="{sorter: false}">备注</th>
            <th width="80"><span><a href="javascript:;">加入日期</a></span></th>
            <th width="130" class="{sorter: false}">操作</th>
          </tr>
        </thead>
        <tbody id="cTable_body">
        <% for(int i = 0 ; i < cList.size() ; i++){
        	vwList = cList.get(i);	
        %>
           <tr id="vw_<%=vwList.getId() %>">
            <td><input type="checkbox" id="cb_<%=vwList.getId() %>"/></td>
            <td><p><%=vwList.getCategoryPath() %></p></td>
            <td><p id="memo_<%=vwList.getId() %>"><%=vwList.getMemo()==null?"":vwList.getMemo() %></p>
            <textarea id="ta_<%=vwList.getId() %>" style="width:200px; height:50px;" name="textfield" rows="2" style="display:none;"></textarea>
            </td>
            <td><%=dateFormat.format(vwList.getCreateDate())%></td>
            <td><a id="d_<%=vwList.getId() %>" href="javascript:;">删除</a><a id="cats_<%=vwList.getId() %>" href="javascript:;" style="display:none;">提交</a> | <a id="e_<%=vwList.getId() %>" href="javascript:;"> 编辑备注</a><a id="c_<%=vwList.getId() %>" href="javascript:;" style="display:none;"> 取消</a></td>
          </tr>
        <% } %>  
        </tbody>
      </table>
      <div class="f-lt" style="margin-bottom:-2em;"><input type="submit" name="button" id="del_button" value="删除所选" /></div>
      <p class="bg-gy" align="right" >共<span id="showCounter">${categoryListSize}</span>笔： <span id="pNum"></span> 
      	<c-rt:choose><c-rt:when test="${categoryListSize<=20}">
			<span class="a-no">&lt; 上一页</span> |  <span class="a-no">下一页 &gt;</span>
		</c-rt:when><c-rt:otherwise>
			<a href="javascript:;" class="a-togo" id="preP">上一页</a> | <a href="javascript:;" class="a-togo" id="nextP">下一页</a>
		</c-rt:otherwise></c-rt:choose>
      </p>
      <p class="page-change">第<span id="curPage">0</span>页，共<span id="totalPage">0</span>页    
      	<c-rt:choose><c-rt:when test="${categoryListSize<=20}">
			<span class="a-no">&lt; 上一页</span> | 
			<c-rt:choose><c-rt:when test="${categoryListSize==0}">0</c-rt:when><c-rt:otherwise>1</c-rt:otherwise></c-rt:choose>
			| <span class="a-no">下一页 &gt;</span>
		</c-rt:when><c-rt:otherwise>
			<a href="javascript:;" class="a-togo" id="preP">&lt; 上一页</a> | 
      		<% int tPage = cList.size()/20;
      		if(cList.size()%20!=0){
      			tPage++;
      		}
      		for(int i = 1 ; i <= tPage ; i++ ){
      			out.write("<a href=\"javascript:;\" id=\"directP_"+i+"\">"+i+"</a>");
      		}
      		%> | <a href="javascript:;" class="a-togo" id="nextP">下一页 &gt;</a>
		</c-rt:otherwise></c-rt:choose>
      </p>
      
      
    </div>
  </div>
<div id="pager" class="pager" style="display:none;">
	<form>
		<a href="javascript:'" id="pager_first" class="first"/>first</a>
		<a href="javascript:'" id="pager_pre" class="prev"/>pre</a>
		<input type="text" class="pagedisplay" id="pagenum"/>
		<a href="javascript:'" id="pager_next" class="next"/>next</a>
		<a href="javascript:'" id="pager_last" class="last"/>last</a>
		<select class="pagesize">
			<option selected="selected"  value="20">20</option>
		</select>
	</form>
</div>
<div id="dialog" class="od-cancel-dailog" title="删除收藏分类" style="display:none">
<br /><p style="text-align:center;">确定要删除？</p><br />
<div style="text-align:center;"><a href="javascript:;" id="delete_commit" class="btn-mid">确定</a><a href="javascript:;" id="delete_cancel" class="btn-mid-gy">取消</a></div></div>
<div id="mdialog" class="od-cancel-dailog" style="display:none">
<br /><p id="dialog_msg" style="text-align:center;"></p><br />
<div style="text-align:center;"><a href="javascript:;" id="msg_ok" class="btn-mid">确定</a></div></div>
</body>
</html>